<template>
  <view>
    <!-- 1.0 轮播图模块 -->
    <swiper
      class="swiper"
      indicator-active-color="#EB4450"
      indicator-dots
      autoplay
    >
      <swiper-item
        v-for="item in pics"
        :key="item.pics_id"
        class="swiper_item"
      >
        <image
          class="swiper_image"
          :src="item.pics_big"
          @tap="showBigImgHandle(item.pics_big)"
        >
      </swiper-item>
    </swiper>
    <!-- 2.0 商品标题 -->
    <view class="info">
      <view class="info_head">
        <text class="price">{{ goods_price }}</text>
        <view class="iconfont icon-zhuanfa open_type_button_wrap">
          <button
            class="open_type_button"
            open-type="share"
          >分享按钮</button>
        </view>
        <!-- 收藏按钮 -->
        <view
          @tap="collectHandle"
          class="iconfont "
          :class=" isCollect ? 'icon-shoucang' : 'icon-shoucang1' "
        ></view>
      </view>
      <view class="title">
        {{goods_name}}
      </view>
    </view>
    <!-- 间隔槽 -->
    <u-gap
      height="20"
      bg-color="#F9F9F9"
    ></u-gap>
    <!-- 3.0 图文详情 -->
    <view class="detail">
      <view class="detail_title">图文详情</view>
      <rich-text :nodes="goods_introduce"></rich-text>
    </view>
    <!-- 4.0 底部栏 -->
    <view class="bottom">
      <view class="icon_btn open_type_button_wrap">
        <view class="iconfont icon-kefu"></view>
        <text class="icon_btn_text">联系客服</text>
        <button
          class="open_type_button"
          open-type="contact"
        >客服按钮</button>
      </view>
      <!-- 购物车也是 TabBar 页，跳转的时候需要设置 open-type="switchTab" -->
      <navigator
        url="/pages/cart/cart"
        open-type="switchTab"
        hover-class="none"
        class="icon_btn"
      >
        <view class="iconfont icon-gouwuche"></view>
        <text class="icon_btn_text">购物车</text>
      </navigator>
      <view
        class="button"
        @tap="addToCartHandle"
      >加入购物车</view>
      <view class="button">立即购买</view>
    </view>
  </view>
</template>

<script>
/**
 * 需求分析
 * 1、大图轮播
 * 	1.1 需要自动播放
 * 	1.2 需要显示指示器，并且按设计图显示样式
 *  1.3 点击图片，显示图片预览窗
 * 			🔑 uni.previewImage
 * 			😈 urls必须是数组，注意文档数组的格式，而且路径是http的远程图片或者云id
 * 2、商品标题
 * 	2.1 注意：这里不需要超出部分用省略号代替，设计稿最多显示两行其实是有问题的。
 * 3、分享功能
		3.1 iconfont的使用
			 🦶1、复制iconfont.css到utils目录
				2、在App.vue通过import语法引入
				3、在标签class加入iconfont和对应icon的名字
 * 	3.2 点击分享按钮弹出分享给好友界面
				😈 因为调用微信分享功能，需要button组件并设置opentype为share才能发起，所以我们需要一个button组件
				😈 button有默认样式，需要修改背景颜色，删除边框等进行覆盖
 * 4、收藏功能
 * 	4.1 点击收藏，记录商品到收藏列表
 * 			🤔收藏数据需要持久化，uni提供的持久化API是什么？保存 uni.setStorage(OBJECT) 读取 uni.getStorage(OBJECT)
 * 	4.2 如果已经收藏，星星icon显示黄色，否则显示空心
 * 			🔑在onLoad事件中，判断商品是否在收藏列表
 * 5、图文详情
 * 	5.1 显示服务端返回的html
 * 6、联系客服，点击跳转到客服界面
 * 7、加入购物车
 * 	7.1 把商品加入购物车，如果购物车有相同商品，自动增加数量
 * 8、立即购买
 * 	加入购物车并且跳转到购物车页面
 */
export default {
  data() {
    return {
      goods_id: "",
      pics: [],
      goods_name: "商品名称",
      goods_price: "0",
      goods_introduce: "",
      goods_small_logo: "",
      isCollect: false,
    };
  },
  onLoad({ goods_id }) {
    // console.log(goods_id);
    this.goods_id = goods_id;
    this.getGoodsDetail();

    // 页面加载的时候，查找本地存储当前商品是否已经被收藏了
    const collectList = uni.getStorageSync("collectList") || [];
    this.isCollect = collectList.some((item) => item.goods_id === goods_id);
  },
  methods: {
    async getGoodsDetail() {
      // 商品详情数据获取
      const {
        pics,
        goods_name,
        goods_price,
        goods_introduce,
        goods_small_logo,
      } = (
        await this.$u.api.getGoodsDetail({
          goods_id: this.goods_id,
        })
      ).message;
      // 按需绑定到 data 中
      this.pics = pics;
      this.goods_name = goods_name;
      this.goods_price = goods_price;
      this.goods_small_logo = goods_small_logo;
      // g 是 global 缩写，表示全局替换
      let htmlStr = goods_introduce.replace(/<img/g, '<img class="img"');
      // 获取系统信息
      uni.getSystemInfo({
        success: (res) => {
          // console.log(res.system.startsWith("iOS"));
          if (res.system.startsWith("iOS")) {
            // 🧨 注意：ios平台不支持 .webp 图片格式，需要替换成 .jpg
            const iosStr = htmlStr.replace(/\.webp/g, ".jpg");
            // console.log(iosStr);
            // IOS 平台需要替换图片格式
            this.goods_introduce = iosStr;
          } else {
            // 其他平台不需要处理
            this.goods_introduce = htmlStr;
          }
        },
      });
    },
    // 显示大图
    showBigImgHandle(current) {
      // 按照接口文档要求把数组处理成  Array.<string>  数组内是字符串格式
      const urls = this.pics.map((item) => item.pics_big);
      // console.log(urls);
      uni.previewImage({ urls, current });
    },
    // 收藏按钮
    collectHandle() {
      // 准备一个收藏用的对象
      const goodsObj = {
        goods_id: this.goods_id,
        goods_small_logo: this.goods_small_logo,
        goods_price: this.goods_price,
        goods_name: this.goods_name,
      };
      console.log("收藏", goodsObj);

      // 读取本地存储的收藏列表
      const collectList = uni.getStorageSync("collectList") || [];

      // 查找当前商品 id 是否已经存在收藏列表中
      const index = collectList.findIndex(
        (item) => item.goods_id === this.goods_id
      );

      // -1 表示是新的商品，需要添加到收藏列表中
      if (index === -1) {
        // 把当前商品追加到收藏列表
        collectList.push(goodsObj);
      } else {
        collectList.splice(index, 1);
      }

      // 修改页面中的按钮状态
      this.isCollect = !this.isCollect;

      // 更新本地存储
      uni.setStorageSync("collectList", collectList);
    },
    // 加入购物车
    addToCartHandle() {
      // 读取本地存储中的购物车数据
      const cartList = uni.getStorageSync("cartList") || [];

      // 检查购物车中是否已经存在当前商品
      const index = cartList.findIndex(
        (item) => item.goods_id === this.goods_id
      );
      // 如果是新的商品，添加到购物车列表中
      if (index === -1) {
        // 商品对象
        const goodsObj = {
          goods_id: this.goods_id,
          goods_small_logo: this.goods_small_logo,
          goods_price: this.goods_price,
          goods_name: this.goods_name,
          goods_select: true, // 选中状态
          goods_count: 1, // 商品数量
        };
        cartList.push(goodsObj);
      }
      // 旧的商品，数量累加即可
      else {
        cartList[index].goods_count += 1;
      }

      // 把新的购物车列表数据更新到本地存储中
      uni.setStorageSync("cartList", cartList);

      // 交互提示 - 消息提示框
      uni.showToast({
        title: "加入成功",
        // 是否显示透明蒙层，防止触摸穿透
        mask: true,
        duration: 1000,
      });
    },
  },
};
</script>

<style lang="scss">
.swiper {
  height: 500rpx;
  .swiper_item {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .swiper_image {
    width: 500rpx;
    height: 500rpx;
  }
}
.info {
  padding: 20rpx 30rpx;
  .icon-shoucang {
    color: #fcaa23;
  }
  .info_head {
    display: flex;
    .price {
      flex: 1;
      font-size: 36rpx;
      color: #eb4450;
      // 通过伪元素处理符号
    }

    .iconfont {
      margin: 0 10rpx;
    }
  }

  .title {
    font-size: 30rpx;
    line-height: 1.4;
    margin: 5rpx;
  }
}
.detail {
  padding-bottom: 94rpx;
  .detail_title {
    height: 80rpx;
    display: flex;
    font-size: 26rpx;
    justify-content: center;
    align-items: center;
  }
}
// 小程序规定，要修改富文本的标签样式，只能通过类选择器修改，不支持HTML标签选择器
.img {
  /* 覆盖默认基线对齐造成的图片底部缝隙影响 */
  vertical-align: top;
}

.bottom {
  height: 94rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 20rpx;
  .icon_btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .iconfont {
      font-size: 40rpx;
    }
    .icon_btn_text {
      font-size: 20rpx;
    }
  }
  .button {
    width: 196rpx;
    height: 60rpx;
    border-radius: 30rpx;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fcaa23;
    margin: 0 10rpx;
    &:last-child {
      background-color: #ea4350;
    }
  }
}
</style>